<!-- 对 divider 组件的编辑 -->
<template>
  <div class="product-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-row>
              <el-col :span="12">
                <PaddingTop :defValue="data.config.paddingTop" :chgValue="(d)=>{data.config.paddingTop = d}" />
              </el-col>
              <el-col :span="12">
                <PaddingBottom :defValue="data.config.paddingBottom" :chgValue="(d)=>{data.config.paddingBottom = d}" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="图文显示" style="margin-bottom:0px;">
                    <el-select style="width:130px;" size="mini" v-model="data.config.showStyle" placeholder="请选择">
                      <el-option label="上图下文" :value="1"></el-option>
                      <el-option label="左图右文" :value="2"></el-option>
                      <el-option label="左文右图" :value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="交互动画" style="margin-bottom:0px;">
                    <el-select style="width:130px;" size="mini" v-model="data.config.animate" placeholder="请选择">
                      <el-option v-for="(item, index) in themes" :key="index" :label="item.title"
                        :value="item.theme">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="图片比例" style="margin-bottom:0px;">
                    <el-select style="width:130px;" size="mini" v-model="data.config.ratio" placeholder="请选择">
                      <el-option label="1:1" :value="'1:1'"></el-option>
                      <el-option label="4:3" :value="'4:3'"></el-option>
                      <el-option label="3:4" :value="'3:4'"></el-option>
                      <el-option label="3:2" :value="'3:2'"></el-option>
                      <el-option label="2:3" :value="'2:3'"></el-option>
                      <el-option label="16:9" :value="'16:9'"></el-option>
                      <el-option label="9:16" :value="'9:16'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                 <el-form :label-width="'120px'">
                  <el-form-item label="图片截断" style="margin-bottom:0px;">
                    <el-select size="mini" style="width:130px;" v-model="data.config.truncation" placeholder="请选择">
                      <el-option label="非截断" :value="0"></el-option>
                      <el-option label="截断" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <TextAlign :defValue="data.config.title.textAlign" title="标题简介位置"
                  :chgValue="(d)=>{data.config.title.textAlign = d}" />
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="链接打开方式" style="margin-bottom:0px;">
                    <el-select style="width:160px;" size="mini" v-model="data.config.linkTarget" placeholder="请选择">
                      <el-option label="当前页面跳转" :value="'_self'"></el-option>
                      <el-option label="新打开页面跳转" :value="'_blank'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="懒加载" style="margin-bottom:0px;">
                    <el-select size="mini" style="width:130px;" v-model="data.config.islazyload" placeholder="请选择">
                      <el-option label="关闭" :value="0"></el-option>
                      <el-option label="开启" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="标题显示" style="margin-bottom:0px;">
                    <el-select style="width:130px;" size="mini" v-model="data.config.titleShow" placeholder="请选择">
                      <el-option label="不显示" :value="0"></el-option>
                      <el-option label="显示" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div v-if="isShowTitle">
                  <FontFamily :defValue="data.config.title.fontFamily" title="标题字体"
                    :chgValue="(d)=>{data.config.title.fontFamily = d}" />
                  <FontSize :defValue="data.config.title.fontSize" title="标题字体大小"
                    :chgValue="(d)=>{data.config.title.fontSize = d}" />
                  <Color :defValue="data.config.title.color" title="标题字体颜色"
                    :chgValue="(d)=>{data.config.title.color = d}" />
                  <FontWeight :defValue="data.config.title.fontWeight" title="标题字体加粗"
                    :chgValue="(d)=>{data.config.title.fontWeight = d}" />
                  <FontStyle :defValue="data.config.title.fontStyle" title="标题字体倾斜"
                    :chgValue="(d)=>{data.config.title.fontStyle = d}" />
                </div>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="简介显示" style="margin-bottom:0px;">
                    <el-select style="width:130px;" size="mini" v-model="data.config.infoShow" placeholder="请选择">
                      <el-option label="不显示" :value="0"></el-option>
                      <el-option label="显示" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div v-if="isShowInfo">
                  <FontFamily :defValue="data.config.info.fontFamily" title="简介字体"
                    :chgValue="(d)=>{data.config.info.fontFamily = d}" />
                  <FontSize :defValue="data.config.info.fontSize" title="简介字体大小"
                    :chgValue="(d)=>{data.config.info.fontSize = d}" />
                  <Color :defValue="data.config.info.color" title="简介字体颜色"
                    :chgValue="(d)=>{data.config.info.color = d}" />
                  <FontWeight :defValue="data.config.info.fontWeight" title="简介字体加粗"
                    :chgValue="(d)=>{data.config.info.fontWeight = d}" />
                  <FontStyle :defValue="data.config.info.fontStyle" title="简介字体倾斜"
                    :chgValue="(d)=>{data.config.info.fontStyle = d}" />
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="选取产品" name="2">
            <el-row>
              <el-col :span="12">
                <el-form v-loading="systemLoading" :label-width="formLabelWidth">
                  <el-form-item label="选择系统页" style="margin-bottom:0px;">
                    <el-select style="width:240px;" size="mini" v-model="cPageId" placeholder="请选择">
                      <el-option :disabled="true" label="请选择" :value="-1"></el-option>
                      <el-option v-for="(item, index) in systemList" :key="index"
                        :label="item.page.name + ' （'+item.system.name+'）'" :value="item.page.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form v-loading="systemCategoryLoading" :label-width="formLabelWidth">
                  <el-form-item label="查询分类" style="margin-bottom:0px;">
                    <el-select style="width:240px;" size="mini" v-model="cSystemCategoryId" placeholder="请选择">
                      <el-option :disabled="true" :label="'请选择'" :value="-2"></el-option>
                      <el-option :label="'全部'" :value="-1"></el-option>
                      <el-option :label="'未分类'" :value="0"></el-option>
                      <!-- <el-option :label="'未分类'" :value="0"></el-option> -->
                      <template v-if="systemCategoryList && systemCategoryList[0] && systemCategoryList[0].length > 0">
                        <template v-for="item in systemCategoryList[0]">
                          <el-option :key="item.id" :label="item.name" :value="item.id"></el-option>
                          <template v-for="ite in systemCategoryList[item.id]">
                            <el-option style="padding-left:36px;" :key="ite.id" :label="ite.name" :value="ite.id">
                            </el-option>
                            <template v-for="it in systemCategoryList[ite.id]">
                              <el-option style="padding-left: 54px;" :key="it.id" :label="it.name" :value="it.id">
                              </el-option>
                            </template>
                          </template>
                        </template>
                      </template>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <TablesSystemItemList :systemItemList="systemItemList" :systemItemLoading="systemItemLoading"
              :totalList="systemItemTotal" :pageSize="paging.limit" :changePage="(d)=>{paging.page = d}"
              :selectionChange="selectionChange" ref="tablesSystemItemList" />
          </el-tab-pane>
          <!-- <el-tab-pane label="交互动画" name="3">
            <el-form :label-width="'120px'" @submit.native.prevent>
              <el-form-item label="当前交互动画" style="margin-bottom:0px;">
                <el-input size="mini" style="width:260px;" :disabled="true" v-model="styleTypeInput" maxlength="12">
                </el-input>
              </el-form-item>
            </el-form>
            <div class="iframe" v-loading="iframeLoading">
              <iframe :src="iframeSrc" frameborder="0" style="width:100%;height:444px;" ref="iframeRender"></iframe>
            </div>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import PaddingTop from '@/components/common/design/dialog/component/formitem/PaddingTop.vue'
import PaddingBottom from '@/components/common/design/dialog/component/formitem/PaddingBottom.vue'
import FontFamily from '@/components/common/design/dialog/component/formitem/FontFamily.vue'
import FontSize from '@/components/common/design/dialog/component/formitem/FontSize.vue'
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import FontWeight from '@/components/common/design/dialog/component/formitem/FontWeight.vue'
import FontStyle from '@/components/common/design/dialog/component/formitem/FontStyle.vue'
import TextAlign from '@/components/common/design/dialog/component/formitem/TextAlign.vue'
import TablesSystemItemList from '@/components/common/design/dialog/component/product/TablesSystemItemList.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import * as functions from '@/core/functions.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
// import crypto from '@/core/crypto.js'
// import qs from 'qs'
// import Global from '@/config/global.js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ]),
    quoteSystemInput () {
      if (this.itemInfo && this.itemInfo.sproduct && this.itemInfo.sproduct.title) {
        return this.itemInfo.sproduct.title
      }
      return '未选取产品'
    },
    styleTypeInput () {
      return '编号：' + this.data.config.animate
    },
    isShowInfo () {
      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
      return parseInt(this.data.config.infoShow) > 0
    },
    isShowTitle () {
      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
      return parseInt(this.data.config.titleShow) > 0
    },
    systemPage () {
      if (!this.systemList || this.systemList.length < 1 || parseInt(this.cPageId) < 1) {
        return null
      }
      let systemPage = this.systemList.find(ele => {
        return parseInt(ele.page.id) === parseInt(this.cPageId)
      })
      return systemPage
    },
    cSystemId () {
      return this.systemPage && this.systemPage.system ? this.systemPage.system.id : -1
    }
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTPRODUCT, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data
      // ....
      this.quoteSystem = bjComponent._other.quoteSystem
      if (!this.quoteSystem || !this.quoteSystem.type) {
        this.quoteSystem = {
          type: 2,
          quotePageId: 0,
          quoteSystemId: 0,
          quoteSystemCategoryId: 0,
          topCount: 1,
          quoteSystemItemIds: '',
          remark: ''
        }
      } else {
        this.quoteSystem.type = 2
        this.quoteSystem.topCount = 1
      }

      // this.iframeStyle = {
      //   width: 825,
      //   row: 2,
      //   col: 4,
      //   compname: 'component_product',
      //   theme: this.$store.state.site.config.theme,
      //   color: this.$store.state.site.config.color,
      //   now: new Date().getTime()
      // }
      // this.iframeStyle.token = crypto.en(JSON.stringify(this.iframeStyle))
      // // iframe
      // this.iframeSrc = '/api/udin/product?w=' + this.iframeStyle.width + '&col=' + this.iframeStyle.col + '&row=' + this.iframeStyle.row + '&compname=' + this.iframeStyle.compname + '&theme=' + this.iframeStyle.theme + '&color=' + this.iframeStyle.color + '&token=' + this.iframeStyle.token
      // this.iframeStyle = {
      //   width: 825,
      //   row: 2,
      //   col: 4,
      //   compname: 'component_product',
      //   theme: this.$store.state.site.config.theme,
      //   color: this.$store.state.site.config.color,
      //   ttextalign: 'center',
      //   tcolor: '#888',
      //   now: new Date().getTime()
      // }
      // this.iframeStyle.token = crypto.en(JSON.stringify(this.iframeStyle))
      // let query = qs.stringify(this.iframeStyle)
      // this.iframeSrc = '/api/udin/product?' + query

      // this.$nextTick(() => {
      //   this.$refs['settingComponentDialog'].open()
      // })

      // // iframe 加载完成后回调的方法，
      // let funcname = WindowType.API_UDIN_COMPONENT_ONLOAD_.replace('[ComponentName]', this.iframeStyle.compname).toUpperCase()
      // window[funcname] = () => {
      //   this.iframeLoading = false
      //   // 调用 iframe 中的 render 方法进行渲染
      //   this.$refs['iframeRender'].contentWindow.render(this.data.config.animate, {
      //     // demo 图片
      //     imageSrc: Global.demoImage,
      //     // 图片组件对应的样式以及caption说明文字
      //     themes: [
      //       { theme: '1', caption: '效果' },
      //       { theme: '5', caption: '移入放大' },
      //       { theme: '6', caption: '移入缩小' },
      //       { theme: '25', caption: '移入左移' },
      //       { theme: '3', caption: '移入上移' },
      //       { theme: '11', caption: '移入朦胧出现' },
      //       { theme: '22', caption: '移入查看图标' },
      //       { theme: '24', caption: '移入阴影扫描' }
      //     ]
      //   })
      // }

      // // 选择theme后回调的方法，并且传入选择的数据
      // let funcallbackname = WindowType.API_UDIN_COMPONENT_ONLOAD_CALLBACK_.replace('[ComponentName]', this.iframeStyle.compname).toUpperCase()
      // window[funcallbackname] = (renderData) => {
      //   this.data.config.animate = parseInt(renderData + 1)
      // }
      // 获取产品系统列表
      this.systemLoading = true
      this.cQuoteSystemItemIds = this.quoteSystem.quoteSystemItemIds ? JSON.parse(this.quoteSystem.quoteSystemItemIds) : []
      this.$jpost('/page/infos-with-system-by-types', [3]).then(response => {
        this.systemLoading = false
        if (response && response.length > 0) {
          this.systemList = response
          if (parseInt(this.quoteSystem.quotePageId) > 0) {
            this.cPageId = parseInt(this.quoteSystem.quotePageId)
          } else {
            this.iscPageIdFirst = false
            this.cPageId = -1
          }
          // 是否存在，存在则请求获取数据
          if (this.cPageId > -1 && this.cQuoteSystemItemIds && this.cQuoteSystemItemIds.length > 0) {
            let pid = this.cQuoteSystemItemIds[0]
            this.$post('/system/product/info-by-system-product-id', { systemId: this.cSystemId, pid: pid }).then(response => {
              if (response && response.sproduct && response.sproduct.id) {
                this.itemInfo = response
              } else {
                this.itemInfo = null
              }
            })
          }
        } else {
          this.systemList = []
          this.cPageId = -1
        }
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '90px',
      iframeLoading: true,
      iframeStyle: {},
      iframeSrc: '',
      name: '单个产品',
      bjComponent: null,
      data: null,
      activeName: '1',
      // 系统 v-loading
      systemLoading: false,
      // 选择的系统id
      cPageId: -1,
      // 系统数据列表
      systemList: [],
      // 系统分类 v-loading
      systemCategoryLoading: false,
      // 选择的系统分类
      cSystemCategoryId: -2,
      // 系统分类数据
      systemCategoryList: [],
      // 获取系统数据 v-loading
      systemItemLoading: false,
      // 获取系统数据后存放的列表
      systemItemList: [],
      // 获取系统查询下的数据总数
      systemItemTotal: 0,
      // 选中的产品信息
      itemInfo: null,
      // 分页
      paging: {
        page: 1,
        limit: 12
      },
      // ...
      quoteSystem: {},
      // 初次执行cPageId
      iscPageIdFirst: true,
      // ids
      cQuoteSystemItemIds: [],
      themes: themes
    }
  },
  watch: {
    cPageId: {
      handler (newValue) {
        this.paging.page = 1
        // 并且获取分类数据列表
        let system = this.systemList.find(ele => {
          return parseInt(newValue) === parseInt(ele.page.id)
        })
        if (!system) {
          return
        }
        this.systemCategoryLoading = true
        this.systemCategoryList = []
        this.cSystemCategoryId = -2
        this.$post('/category/table-data-infos-by-system-id', { systemId: this.cSystemId }).then(response => {
          this.systemCategoryLoading = false
          if (response && response.total && response.total > 0) {
            this.systemCategoryList = response.categories
            // quoteSystemCategoryId
            if (this.iscPageIdFirst) {
              if (newValue > 0) {
                this.cSystemCategoryId = this.quoteSystem.quoteSystemCategoryId
                this.iscPageIdFirst = false
              }
            } else {
              this.cSystemCategoryId = -1
            }
          } else {
            this.systemCategoryList = []
            if (this.iscPageIdFirst) {
              if (newValue > 0) {
                this.cSystemCategoryId = this.quoteSystem.quoteSystemCategoryId
                this.iscPageIdFirst = false
              }
            } else {
              this.cSystemCategoryId = -1
            }
          }
        })
      },
      deep: true
    },
    cSystemCategoryId: {
      handler (newValue) {
        if (newValue >= -1) {
          this.getProductData()
        }
      },
      deep: true
    },
    paging: {
      handler (newValue, oldValue) {
        if (newValue.page > 0) {
          this.getProductData()
        }
      },
      deep: true
    }
  },
  methods: {
    selectionChange (row) {
      this.itemInfo = row
      this.cQuoteSystemItemIds[0] = row.sproduct.id
      this.quoteSystem.quotePageId = this.cPageId
      this.quoteSystem.quoteSystemId = this.cSystemId
      this.quoteSystem.quoteSystemCategoryId = this.cSystemCategoryId
    },
    getProductData () {
      if (this.cSystemId < -1) {
        return
      }
      this.systemItemLoading = true
      this.$post('/system/product/infos-by-system-category-id-and-page-limit', {
        systemId: this.cSystemId,
        categoryId: this.cSystemCategoryId,
        name: '',
        page: this.paging.page,
        limit: this.paging.limit
      }).then(response => {
        this.systemItemLoading = false
        if (response && response.total > 0) {
          this.systemItemList = response.list
          this.systemItemTotal = response.total
          // 渲染
          this.renderSelect()
        } else {
          this.systemItemList = []
          this.systemItemTotal = 0
        }
      })
    },
    renderSelect () {
      if (this.cQuoteSystemItemIds && this.cQuoteSystemItemIds.length > 0 && this.systemItemList && this.systemItemList.length > 0) {
        let pid = this.cQuoteSystemItemIds[0]
        let row = this.systemItemList.find(ele => {
          return parseInt(ele.sproduct.id) === parseInt(pid)
        })
        if (row) {
          this.$nextTick(() => {
            this.$refs['tablesSystemItemList'].toggleSelection(row)
          })
        }
      }
    },
    // 产品数据处理
    getQuoteData (dataList) {
      let quoteData
      dataList.forEach(el => {
        let quote = {
          data: {
            info: '',
            title: ''
          },
          image: {
            alt: '',
            src: '',
            title: ''
          },
          link: {
            href: 'javascript:void(0)',
            target: '_self'
          }
        }
        quote.data.title = el.sproduct && el.sproduct.title ? el.sproduct.title : ''
        quote.data.info = el.sproduct && el.sproduct.info ? el.sproduct.info : ''
        quote.image.alt = el.imageFace && el.imageFace.srepertoryQuote && el.imageFace.srepertoryQuote.config ? JSON.parse(el.imageFace.srepertoryQuote.config).alt : ''
        quote.image.title = el.imageFace && el.imageFace.srepertoryQuote && el.imageFace.srepertoryQuote.config ? JSON.parse(el.imageFace.srepertoryQuote.config).title : ''
        quote.image.src = el.imageFace && el.imageFace.hrepertory ? functions.getRepertoryImageSrcByHostRepertory(el.imageFace.hrepertory) : ''
        quote.link.target = this.data && this.data.config && this.data.config.linkTarget ? this.data.config.linkTarget : '_self'
        quoteData = quote
      })
      return quoteData
    },
    // .............
    close () {
      this.dialogShow = false
      this.iframeLoading = true
      this.iframeStyle = {}
      this.iframeSrc = ''
      this.bjComponent = null
      this.data = null
      this.activeName = '1'
      this.systemLoading = false
      this.cPageId = -1
      this.systemList = []
      this.systemCategoryLoading = false
      this.cSystemCategoryId = -2
      this.systemCategoryList = []
      this.systemItemLoading = false
      this.systemItemList = []
      this.systemItemTotal = 0
      this.itemInfo = null
      // ...
      this.quoteSystem = {}
      this.iscPageIdFirst = true
      this.cQuoteSystemItemIds = []
    },
    saveclose () {
      this.quoteSystem.quoteSystemItemIds = JSON.stringify(this.cQuoteSystemItemIds)
      this.bjComponent._other.quoteSystem = this.quoteSystem
      if (this.itemInfo) {
        let quoteSystemData = []
        quoteSystemData = [_.cloneDeep(this.itemInfo)]
        this.data.quote = this.getQuoteData(quoteSystemData)
      }
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    PaddingTop,
    PaddingBottom,
    FontFamily,
    FontSize,
    Color,
    FontWeight,
    FontStyle,
    TextAlign,
    TablesSystemItemList
  }
}
const themes = [
  { theme: 1, title: '无效果' },
  { theme: 2, title: '移入放大' },
  { theme: 3, title: '移入缩小' },
  { theme: 4, title: '移入左移' },
  { theme: 5, title: '移入上移' },
  { theme: 6, title: '移入朦胧出现' },
  { theme: 7, title: '移入图标查看' },
  { theme: 8, title: '移入阴影扫描' }
]
</script>

<style scoped>
.edit-container-u {
  width: 840px;
}
</style>
